<template>
  <div class="lottery">
    <el-table
      :data="tableData"
      border
      :load="load"
      row-key="id"
      :loading="tableLoading"
      :default-expand-all="false"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      show-summary
      :summary-method="handleSummary"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      style="width: 100%"
    >
      <div slot="id" slot-scope="{ index }">
        <span>{{ index + 1 }}</span>
      </div>
      <el-table-column
        v-for="(item, index) in column"
        :key="index"
        :prop="item.prop"
        :align="item.align"
        :label="item.label"
      >
      </el-table-column>
    </el-table>

    <div class="footer" >
      <el-input v-model.trim="originalData"
        type="textarea"
        :rows="10"
        style="width:50%"
        placeholder="目前支持格式如下：1 2 30 3+3，..-,3,5,20,1 虎 龙、羊      各100">
      </el-input>
      <h1>
        <span class="sum">总计：{{ sum }}</span>
      </h1>
    </div>
    <div  style="margin-top: 20px"></div>
    <div style="margin-left: 25%">
      <el-button @click="postHandleData" type="success" icon="el-icon-check" round>提交</el-button>
      <el-button type="primary" @click="getFindAll" icon="el-icon-search" round>查询</el-button>
      <el-button type="danger" @click="getResetData" icon="el-icon-refresh" round>重置</el-button>
    </div>

  </div>
</template>

<script>
import { findAll, handleData, resetData } from '@/api/lottery.js'

const tableData = [
  {
    id: 1,
    anim_1: '1',
    anim_2: '2',
    anim_3: '3',
    anim_4: '4',
    anim_5: '5',
    anim_6: '6',
    anim_7: '7',
    anim_8: '8',
    anim_9: '9',
    anim_10: '10',
    anim_11: '11',
    anim_12: '12',
    children: [
      {
        id: 11,
        anim_1: '',
        anim_2: '',
        anim_3: '',
        anim_4: '',
        anim_5: '',
        anim_6: '',
        anim_7: '',
        anim_8: '',
        anim_9: '',
        anim_10: '',
        anim_11: '',
        anim_12: ''
      }
    ]
  },
  {
    id: 2,
    anim_1: '13',
    anim_2: '14',
    anim_3: '15',
    anim_4: '16',
    anim_5: '17',
    anim_6: '18',
    anim_7: '19',
    anim_8: '20',
    anim_9: '21',
    anim_10: '22',
    anim_11: '23',
    anim_12: '24',
    children: [
      {
        id: 21,
        anim_1: '',
        anim_2: '',
        anim_3: '',
        anim_4: '',
        anim_5: '',
        anim_6: '',
        anim_7: '',
        anim_8: '',
        anim_9: '',
        anim_10: '',
        anim_11: '',
        anim_12: ''
      }
    ]
  },
  {
    id: 3,
    anim_1: '25',
    anim_2: '26',
    anim_3: '27',
    anim_4: '28',
    anim_5: '29',
    anim_6: '30',
    anim_7: '31',
    anim_8: '32',
    anim_9: '33',
    anim_10: '34',
    anim_11: '35',
    anim_12: '36',
    children: [
      {
        id: 31,
        anim_1: '',
        anim_2: '',
        anim_3: '',
        anim_4: '',
        anim_5: '',
        anim_6: '',
        anim_7: '',
        anim_8: '',
        anim_9: '',
        anim_10: '',
        anim_11: '',
        anim_12: ''
      }
    ]
  },
  {
    id: 4,
    anim_1: '37',
    anim_2: '38',
    anim_3: '39',
    anim_4: '40',
    anim_5: '41',
    anim_6: '42',
    anim_7: '43',
    anim_8: '44',
    anim_9: '45',
    anim_10: '46',
    anim_11: '47',
    anim_12: '48',
    children: [
      {
        id: 41,
        anim_1: '',
        anim_2: '',
        anim_3: '',
        anim_4: '',
        anim_5: '',
        anim_6: '',
        anim_7: '',
        anim_8: '',
        anim_9: '',
        anim_10: '',
        anim_11: '',
        anim_12: ''
      }
    ]
  },
  {
    id: 5,
    anim_1: '49',
    anim_2: '',
    anim_3: '',
    anim_4: '',
    anim_5: '',
    anim_6: '',
    anim_7: '',
    anim_8: '',
    anim_9: '',
    anim_10: '',
    anim_11: '',
    anim_12: '',
    children: [
      {
        id: 51,
        anim_1: '',
        anim_2: '',
        anim_3: '',
        anim_4: '',
        anim_5: '',
        anim_6: '',
        anim_7: '',
        anim_8: '',
        anim_9: '',
        anim_10: '',
        anim_11: '',
        anim_12: ''
      }
    ]
  }
]
export default {
  name: 'Lottery',
  data () {
    return {
      tableLoading: false,
      originalData: '',
      sum: '',
      column: [
        {
          prop: 'anim_1',
          label: '蛇',
          align: 'center'
        },
        {
          prop: 'anim_2',
          label: '龙',
          align: 'center'
        },
        {
          prop: 'anim_3',
          label: '兔',
          align: 'center'
        },
        {
          prop: 'anim_4',
          label: '虎',
          align: 'center'
        },
        {
          prop: 'anim_5',
          label: '牛',
          align: 'center'
        },
        {
          prop: 'anim_6',
          label: '鼠',
          align: 'center'
        },
        {
          prop: 'anim_7',
          label: '猪',
          align: 'center'
        },
        {
          prop: 'anim_8',
          label: '狗',
          align: 'center'
        },
        {
          prop: 'anim_9',
          label: '鸡',
          align: 'center'
        },
        {
          prop: 'anim_10',
          label: '猴',
          align: 'center'
        },
        {
          prop: 'anim_11',
          label: '羊',
          align: 'center'
        },
        {
          prop: 'anim_12',
          label: '马',
          align: 'center'
        }
      ],
      tableData: []
    }
  },
  created () {
    this.getFindAll()
  },
  methods: {
    async getFindAll () {
      this.tableLoading = true
      try {
        const res = await findAll()
        if (res.data.meta.code * 1 === 200) {
          this.sum = this.getSum(res.data.data)

          this.tableData = JSON.parse(JSON.stringify(tableData))

          this.tableData.forEach(item => {
            const arr = Object.values(item).slice(1, -1)
            this.transformData(arr, item, res.data.data)
          })
        } else {
          this.$message.error(res.data.meta.msg)
        }
      } catch (error) {
        console.log(error)
      } finally {
        this.tableLoading = false
      }
    },
    getSum (data) {
      return data.reduce((accumulator, currentValue) => {
        return accumulator + currentValue.bettingBalance
      }, 0)
    },
    transformData (arr, obj, data) {
      // 处理 anim_1、anim_2、anim_3...
      for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < data.length; j++) {
          if (!arr[i]) break
          if (arr[i] * 1 === data[j].bettingNumber * 1) {
            // const bettingNumber = data[arr[i] - 1]?.bettingNumber
            const bettingBalance = data[j]?.bettingBalance

            // 设置外层结构中 anim_1、anim_2、anim_3...的值
            // obj[`anim_${i + 1}`] = bettingNumber

            // 设置 children 中的 anim_1、anim_2、anim_3... 的值
            obj.children[0][`anim_${i + 1}`] = bettingBalance
          }
        }
      }
      // return [obj]
    },
    async postHandleData () {
      try {
        if (!this.originalData) {
          this.$message.warning('请输入内容再提交')
          return
        }
        await this.$confirm('是否确认提交？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

        // 用户点了确定，才会执行这里
        const res = await handleData({ originalData: this.originalData })
        if (res.data.meta.code * 1 === 200) {
          this.originalData = null
          this.$message.success('操作成功')
          this.getFindAll()
        } else {
          this.$message.error(res.data.meta.msg)
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error(error)
        } else {
          this.$message.info('已取消操作')
        }
      }
    },

    async getResetData () {
      try {
        await this.$confirm('是否确认重置？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

        // 用户点了【确定】才会执行下面
        const res = await resetData()
        if (res.data.meta.code * 1 === 200) {
          this.$message.success('重置成功')
          this.getFindAll()
        } else {
          this.$message.error(res.data.meta.msg)
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error(error)
        } else {
          this.$message.info('已取消操作')
        }
      }
    },

    removeSpaces () {
      // 使用正则表达式去掉所有空格
      this.originalData = this.originalData.replace(/\s/g, '')
    },
    headerCellStyle () {
      return 'font-size: 18px;font-weight: 700;color:#000;'
    },
    cellStyle (val) {
      return 'color: red;font-size: 16px;font-weight:600;'
    },
    handleSummary (val) {
      const { columns, data } = val
      const newData = []
      data.map((v) => {
        newData.push(v.children[0])
      })
      const sums = []
      columns.forEach((column, index) => {
        // if (index === 0) {
        //   sums[index] = '总价'
        //   return
        // }
        const values = newData.map((item) => Number(item[column.property]))
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          // sums[index] += ' 元'
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    load (tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([
          {
            anim_1: '',
            anim_2: '',
            anim_3: '',
            anim_4: '',
            anim_5: '',
            anim_6: '',
            anim_7: '',
            anim_8: '',
            anim_9: '',
            anim_10: '',
            anim_11: '',
            anim_12: ''
          }
        ])
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table {
  tr {
    color: #000;
  }
  .el-table__row--level-1 {
    .cell {
      color: #000;
      font-size: 14px;
      font-weight: 500;
    }
  }
}
.lottery {
  margin-top: 60px;
  text-align: left;
}
.footer {
  margin-top: 16px;
  .sum {
    font-weight: bold;
  }
  .el-textarea {
    width: 25%;
    vertical-align: middle;
    margin: 0 16px;
  }
}
</style>
